<template>
	<view class="template-edit tn-safe-area-inset-bottom" >
		<view class="tn-safe-area-inset-bottom">

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin-left tn-margin-right">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">发布心情 ~ ~ ~</view>
				</view>
				<!-- <view class="justify-content-item tn-text-df tn-color-grey">
					<text class="tn-padding-xs">500字内</text>
					<text class="tn-icon-keyboard-circle"></text>
				</view> -->
			</view>

			<view class="tn-margin tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;">
				<input placeholder="写下一句简短的标题" name="input" placeholder-style="color:#AAAAAA"></input>
			</view>
			<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
				<textarea maxlength="500" placeholder="说点什么" placeholder-style="color:#AAAAAA"></textarea>
			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-image" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">图片</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @tap="clear">
					<text class="tn-padding-xs">清空上传</text>
					<text class="tn-icon-delete"></text>
				</view>
			</view>




			<view class="tn-margin-left tn-padding-top-xs">
				<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :formData="formData"
					:fileList="fileList" :disabled="disabled" :autoUpload="autoUpload" :maxCount="maxCount"
					:showUploadList="showUploadList" :showProgress="showProgress" :deleteable="deleteable"
					:customBtn="customBtn" @sort-list="onSortList" />

			</view>

			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
				<view class="tn-flex justify-content-item">
					<view class="tn-bg-black tn-color-white tn-text-center"
						style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
						<text class="tn-icon-tag" style="font-size: 30rpx;"></text>
					</view>
					<view class="tn-text-lg tn-padding-right-xs tn-text-bold">话题标签</view>
				</view>
				<view class="justify-content-item tn-text-df tn-color-grey" @click="show3=true">
					<text class="tn-padding-xs">新增</text>
					<text class="tn-icon-add"></text>
				</view>
			</view>

			<view class="tn-tag-content tn-margin tn-text-justify tn-padding-bottom">
				<view v-for="(item, index) in tagList" :key="index"
					class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold"
					:class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
					<text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
				</view>
			</view>

			<!-- 悬浮按钮-->
			<view class="tn-flex tn-footerfixed">
				<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold @tap="upload">
						<!-- <text class="tn-icon-light tn-padding-right-xs tn-color-black"></text> -->
						<text class="tn-color-black">发 布</text>
						<text class="tn-icon-camera tn-padding-left-xs tn-color-black"></text>
					</tn-button>
				</view>
			</view>

		</view>

		<view class='tn-tabbar-height'></view>


 <tn-modal v-model="show3" :custom="true" :showCloseBtn="true">
        <view class="custom-modal-content">
          <view class="">
            <view class="tn-bg-gray--light" style="border-radius: 10rpx;padding: 20rpx 30rpx;margin: 50rpx 0 50rpx 0;">
              <input placeholder="请填写新标签" name="input" placeholder-style="color:#AAAAAA" maxlength="20"></input>
            </view>
          </view>
          <view class="tn-flex-1 justify-content-item  tn-text-center">
            <tn-button backgroundColor="#3668FC" padding="30rpx 0" width="60%" fontBold>
              <text class="tn-color-white">保 存</text>
            </tn-button>
          </view>
        </view>
      </tn-modal>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateEdit',
		mixins: [template_page_mixin],
		data() {
			return {
				show3:false,
				tagList: [{
						color: 'red',
						title: "元神",
					},
					{
						color: 'cyan',
						title: "LOL",
					},
					{
						color: 'green',
						title: "科技",
					},
					{
						color: 'orange',
						title: "免费",
					},
					{
						color: 'purplered',
						title: "前端",
					},
					{
						color: 'purple',
						title: "后端",
					},
					{
						color: 'brown',
						title: "UI设计",
					},
					{
						color: 'yellowgreen',
						title: "求助",
					},
					{
						color: 'grey',
						title: "吃货",
					},
					{
						color: 'orangered',
						title: "萌宠",
					}
				],
				action: 'https://www.hualigs.cn/api/upload',
				// action: '',
				formData: {
					apiType: 'this,ali',
					token: 'dffc1e06e636cff0fdf7d877b6ae6a2e',
					image: null
				},
				fileList: [{
					url: 'https://img0.baidu.com/it/u=3846695387,1572281966&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
				}, {
					url: 'https://gd-hbimg.huaban.com/32c03991a4b160f7995939e3cbb15635211a0d503e132-YttxNL_fw658'
				}, {
					url: 'https://img2.baidu.com/it/u=2819655934,963197807&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708'
				}, {
					url: 'https://img2.baidu.com/it/u=2037909377,464167036&fm=253&fmt=auto&app=138&f=JPEG?w=394&h=499'
				}],
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: false,
				deleteable: true,
				customStyle: false,
				maxCount: 9,
				disabled: false,
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			// 手动上传文件
			upload() {
				this.$refs.imageUpload.upload()
			},
			// 手动清空列表
			clear() {
				this.$refs.imageUpload.clear()
			},
			// 图片拖拽重新排序
			onSortList(list) {
				console.log(list);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-edit {
		background-color: #fff;
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/
</style>
